<template>
    <vol-box :lazy="false" v-model="model" title="上传设备升级文件" :width="600" :padding="0">
        <div  class="upload-container" style="height: 280px;padding-bottom: 20px;">
            <div class="button-group" style="margin-top: 10px;">
                <el-upload style="float: left; " show-file-list ref="uploadFile" accept=".bin" :max-size="maxSize"
                            :on-change="clearMsg" :before-upload="beforeUpload" :data="extraFormData" :action="url">
                    <el-button size="default" style="font-size: 14px;"><i class="el-icon-folder-opened"></i>选择文件</el-button>
                </el-upload>
                <el-text class="mx-1" style="font-size: 14px; margin-left: 20px; margin-top: 2px;">文件类型：</el-text>
                <el-select v-model="uType" size="default" placeholder="请选择文件升级类型" style="width: 180px;font-size: 12px;">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                </el-select>
                <el-button style="margin-left: 20px; width: 90px;" type="success" size="small" @click="upload()"
                            :loading="loadingStatus">
                        <i class="el-icon-document"></i>上传文件</el-button>

            </div>
            <div style="height: 30px;">
                <div class="text" :class="resultClass" style="margin-top: 15px;  margin-left: 5px;color: red;" v-html="msg">
                </div>
            </div>
            <div class="alert">
                <el-alert title="上传说明" type="warning" :closable="false" show-icon>只能上传bin文件,文件大小不超过{{ maxSize
                }}M</el-alert>
            </div>
            <div v-if="file">
                <h3 style="font-size: 14px;">所选文件</h3>
                <div class="file-info" style="font-size: 14px;">
                    <span>文件名：{{ file.name }}</span>
                    <span>大小：{{ (file.size / 1024).toFixed(2) }} KB</span>
                </div>
            </div>
            <div v-show="message" class="v-r-message">
                <h3 class="title">上传结果</h3>
                <div class="text" :class="resultClass" v-html="message"></div>
            </div>

        </div>
    </vol-box>
</template>
<script>
import VolBox from '@/components/basic/VolBox.vue';
import axios from 'axios'
var $chart1;
export default {
    name: 'App',
    components: {
        VolBox
    },
    data() {
        return {
            model: false,
            height: 278,
            width: 600,
            maxSize: 30,
            //url: 'http://47.107.117.94:9991/api/deviceinfo/uploadFile',//写的是服务器的地址，本地调试需要改
            url: axios.defaults.fileUploadUrl,//写的是服务器的地址，本地调试需要改
            file: null,
            msg: '请选择升级文件！',
            loadingStatus: false,
            uType: 0,
            options:[{value: 0, label: '雷达升级'},{value: 1, label: '主板升级'}],
        };
    },
    mounted() {
        // ... 其他 ECharts 配置和初始化代码
    },
    created() {
        this.height = document.body.clientHeight - 195;
        let width = document.body.clientWidth * 0.88;
        this.width = width < 1000 ? 1000 : width;
    },
    beforeDestroy() {

    },
    methods: {
        openFileWin() {
            this.model = true;
            this.$nextTick(() => {
                this.msg = "请选择升级文件！";
                this.message = '';
                this.file = null;
            });
        },
        getFileType() {
            let fileName =
                this.file.name
                    .split('.')
                    .pop()
                    .toLocaleLowerCase() || '';
            if (['bin'].indexOf(fileName) == -1) {
                this.$Message.error('只能选择bin文件');
                return false;
            }
            return true;
        },
        beforeUpload(file) {
            this.file = file;
            if (!this.getFileType()) {
                this.msg = "请选择升级文件"
                return false;
            }
            this.msg = "文件已选择，请上传文件"
            return false;
        },
        upload() {
            let _url = this.url;
            if (!_url) {
                return this.$Message.error('没有配置好Url');
            }

            if (!this.file) {
                return this.$Message.error('请选择文件');
            }

            let type = this.uType==0?0:1;
            var formData = new FormData();
            formData.append('file', this.file);
            formData.append('filetype', type);
            // formData.append('id', this.updateDto.id);
            formData.append('remarks', '升级使用文件');
            this.loadingStatus = true;
            this.msg = "正在上传升级文件...";
            this.http.post(_url, formData, true, { headers: { 'Content-Type': 'multipart/form-data' } }).then(
                (x) => {
                    // this.$refs.uploadFile.clearFiles();
                    this.loadingStatus = false;
                    // this.file = null;
                    if (x.status) {
                        this.file = null;
                        this.msg = "文件上传成功";
                        this.$emit('importExcelAfter', x);
                    } else {
                        this.msg = x.message;
                    }

                    this.message = x.message;
                    this.resultClass = x.status ? 'v-r-success' : 'v-r-error';
                },
                (error) => {
                    this.loadingStatus = false;
                }
            );
        }
    },
}
</script>
<style lang="less" scoped>
.upload-container {
    min-height: 250px !important;
    display: inline-block;
    width: 100%;
    padding: 10px;
    border: 1px dashed #989898;
    min-height: 250px;
    border-radius: 5px;

    .alert {
        margin-top: 10px;
    }

    .el-button-group>* {
        display: flex;
    }

    h3 {
        margin: 9px 0px;
    }

    .file-info>span {
        margin-right: 20px;
    }

    .v-r-message {
        margin-top: 10px;

        .title {
            margin-bottom: 2px;
        }

        >.text {
            font-size: 13px;
        }

        .v-r-success {
            color: #02b702;
        }

        .v-r-error {
            color: #dc0909;
        }
    }
}
</style>